<template>
  <div class="ke">
    <top2></top2>
    <div v-loading='loading' style="padding: 20px;">
      <div class="kflexc" style="margin-bottom: 20px;">

        <el-upload ref="upload" action="#" :before-upload="uploasd" :show-file-list="false" accept=".xlsx,.xls">
           <el-button type="danger" plain round>导入可结算订单</el-button>
        </el-upload>

        <div @click="xiazai" style="margin-right: 20px; font-size: 12px; color: #999; cursor: pointer; margin-left: 20px;">下载模板</div>

        <div style="margin-right: 20px; font-size: 12px; color: #409EFF; cursor: pointer; margin-left: 20px;" @click="$router.push('/yongjinzhichu/zhichuguanli/zhichushenhejilu')">导入记录</div>

      </div>
      <div class="kflexc">
        <div style="width: 250px; margin-right: 40px; margin-bottom: 20px; position: relative;" class="kflexc">
          <el-input v-model="all.order_id" multiple collapse-tags filterable clearable placeholder="订单ID"></el-input>
          <el-tooltip class="item" effect="dark" content="批量查询" placement="top-start">
          	<span style="position: absolute; right: -30px; top: 8px; color: #1989FA; font-size: 16px; cursor: pointer;" @click="duoxuanlog = true">
          		<i class="el-icon-circle-plus"></i>
          	</span>
          </el-tooltip>
        </div>
        <div style="width: 250px; margin-right: 20px; margin-bottom: 20px;">
          <el-input v-model="all.plan_mobile" placeholder="生产号码"></el-input>
        </div>
        <div style="width: 250px; margin-right: 20px; margin-bottom: 20px;">
          <el-input v-model="all.upstream_order_id" placeholder="上游单号"></el-input>
        </div>
        <div style="width: 220px; margin-right: 20px; margin-bottom: 20px;">
          <el-select  v-model="all.is_settlement" style="width: 220px;" placeholder="结算状态" filterable clearable>
            <el-option label="未结算" value="0" ></el-option>
            <el-option label="已结算" value="1" ></el-option>
          </el-select>
        </div>
        <el-button type="danger" round  style="margin-right: 20px; margin-bottom: 20px;" @click="search()">搜索</el-button>

      </div>

      <el-table :data="list" border style="width: 100%; margin: 20px 0;" ref="multipleTable" >

        <el-table-column align='center' prop='order_id' label="订单ID"></el-table-column>
        <el-table-column align='center' prop='upstream_order_id' label="上游单号"></el-table-column>
        <el-table-column align='center' prop='plan_mobile' label="生产号码"></el-table-column>
        <el-table-column align='center' prop='status_name' label="订单状态"></el-table-column>
        <el-table-column align='center' prop='active_status_name' label="激活状态"></el-table-column>
        <el-table-column align='center' prop='is_settlement' label="结算状态">
          <template slot-scope="scope">
            <div v-if="scope.row.is_settlement == 0">未结算</div>
            <div v-if="scope.row.is_settlement == 1">已结算</div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination style="text-align: right;" background layout="total,prev, pager, next" :current-page="all.page" @current-change="fanye" :page-size="all.page_size" :total="total"></el-pagination>
    </div>

    <el-dialog title="错误提示" center :visible.sync="cuowushow" :close-on-click-modal="false" width="1040px">
      <div v-for="(item,index) in cuowu" :key="index">
        {{item}}
      </div>
      <div slot="footer" class="dialog-footer">
       <el-button type="primary" round @click="cuowushow = false">确定</el-button>
      </div>
    </el-dialog>



    <el-dialog title="多个订单ID搜索" :visible.sync="duoxuanlog" :close-on-click-modal="false" width="600px">
    	<div>
    		<el-input type="textarea" :rows="10" placeholder="一行一个，可直接粘贴excel纵列数据" v-model="duoxuanids"></el-input>
    	</div>
    	<div slot="footer" class="dialog-footer">
    		<el-button type="primary" size="small" @click="search2">搜索</el-button>
    	</div>
    </el-dialog>

  </div>
</template>

<script>
  import bianmaquanxuan from "@/components/orderManagement/zujian/bianmaquanxuan.vue";
  import top2 from './top.vue'
  import axios from 'axios'
  import top from '@/components/top.vue'
  import left from '@/components/left.vue'
  import foot from '@/components/foot.vue'
  import moment from "moment";
  import XLSX from 'xlsx';
  import {
      read,utils
    } from 'xlsx'

  export default {
    components: {
      "left": left,
      "top": top,
      "foot": foot,
      top2
    },
    name: "ke",
    data() {
      return {
        duoxuanids:"",
        duoxuanlog:false,
        loading:false,
        list:"",
        all:{
          order_ids:"",
          order_id:"",
          plan_mobile:"",
          page:1,
          page_size:20,
          upstream_order_id:"",
          is_settlement:""
        },
        total:0,
        cuowushow:false,
        cuowu:[],
      }
    },
    created() {
      this.getlist()



    },
    mounted() {

    },
    methods: {
      search2: function() {
      	this.all.order_ids = this.duoxuanids.split(/\n/)
      	for (let i in this.all.order_ids) {
      		this.all.order_ids[i] = this.all.order_ids[i].trim()
      	}
        this.all.order_ids = this.all.order_ids.toString()
      	this.page = 1;
      	this.search();
      	this.duoxuanlog = false
      },
      //导入
      readExcel1(files) {
        return new Promise((res, rej) => {
          var that = this;
          if (files.length <= 0) {
            return;
          }
          if (!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())) {
            this.$Message.error('上传格式不正确，请上传xls或者xlsx格式');
            return;
          }
          const fileReader = new FileReader();
          fileReader.onload = (ev) => {
            try {
              const data = ev.target.result;
              const workbook = read(data, {
                type: 'binary'
              });
              // 取第一张表
              const wsname = workbook.SheetNames[0];
              // 生成json表格内容
              const ws = utils.sheet_to_json(workbook.Sheets[wsname]);
              console.log(ws);
              // 后续为自己对ws数据的处理
              res(ws)
            } catch (e) {
              return false;
              rej(e)
            }
          };
          fileReader.readAsBinaryString(files[0]);
        })

      },
      uploasd(file, fileList) {

        let obj = new FormData()
        obj.append('file',file)
          axios.post('/api/plan-market/order/settled/import',obj)
          .then(response => {
              if (response.data.msg.code == 0) {
                this.$router.push('/yongjinzhichu/zhichuguanli/zhichushenhejilu')
              } else {
                this.$message.error(response.data.msg.info);
              }
          })
        // var that = this
        // let files = {
        //   0: file
        // }
        // let arr = []
        // let ff = this.readExcel1(files);
        // ff.then((res) => {
        //   res.forEach(item => {
        //     let obj = {
        //       order_id: item['订单ID'],
        //       plan_mobile: item['生产号码'],
        //       upstream_order_id: item['上游单号'],
        //     }
        //     arr.push(obj)
        //   })
        //   axios.post('/api/plan-market/order/settled/import',{datas:arr})
        //   .then(response => {
        //       if (response.data.msg.code == 0) {
        //         this.$message.success('导入成功');
        //         this.getlist()


        //         this.cuowu = response.data.data
        //         if(response.data.data.length > 0){
        //           this.cuowushow = true
        //         }

        //       } else {
        //         this.$message.error(response.data.msg.info);
        //       }
        //   })
        // })
      },

      uploasd2(file, fileList) {
        var that = this
        let files = {
          0: file
        }
        let arr = []
        let ff = this.readExcel1(files);
        ff.then((res) => {
          res.forEach(item => {
            let obj = {
              order_id: item['订单ID'],
              plan_mobile: item['生产号码'],
              upstream_order_id: item['上游单号'],
            }
            arr.push(obj)
          })
          axios.post('/api/plan-market/order/settled/import',{datas:arr})
          .then(response => {
              if (response.data.msg.code == 0) {
                this.$message.success('导入成功');
                this.getlist()
                // this.querenzhichuall.zuizhong = parseFloat(this.querenzhichuall.sum_commission)  - parseFloat(response.data.data.adjust_commission)

                this.cuowu = response.data.data
                if(response.data.data.length > 0){
                  this.cuowushow = true
                }

              } else {
                this.$message.error(response.data.msg.info);
              }
          })
        })
      },


      search: function() {
        this.all.page = 1
        this.getlist()
      },
      //翻页
      fanye: function(page) {
        this.loading = true
        this.all.page = page
        this.getlist()
      },
      //获取列表
      getlist: function() {
        axios.get('/api/plan-market/order/settled/get',{params:this.all})
          .then(response => {
            if (response.data.msg.code == 0) {
              this.list = response.data.data.data

              this.total = response.data.data.total

              this.loading = false
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },

      xiazai:function(){
        location.href = 'https://file.storep.91haoka.cn/gantanhao/kejiesuandingdan.xlsx'
      }

    }
  }
</script>

<style lang="scss" scoped>
  .ke {
    /deep/ .el-radio{ display: flex; align-items: center;}
    .powertop {
    	display: flex;
    	background:#f9f9f9;
    }
    .powertopli {
    	flex-basis: 180px;
    	line-height: 50px;
    	border-bottom: 3px #F9F9F9 solid;
    	color: #727272;
    	border-right: 1px #F9F9F9 solid;
    	font-size: 16px;
    	text-align: center;
    }
    .router-link-active {
    	background: #FFFFFF;
    	border-bottom: 3px #2974FF solid;
    }
    /deep/ .el-pagination.is-background .btn-prev:disabled{ background: rgba(246, 246, 246, 0.3); border: 1px rgba(167, 167, 167, 0.3) solid;}
    /deep/ .el-pagination.is-background .btn-next:disabled{ background: rgba(246, 246, 246, 0.3); border: 1px rgba(167, 167, 167, 0.3) solid;}
    /deep/ .el-pagination.is-background .btn-next{ background: rgba(246, 246, 246,1); border: 1px rgba(167, 167, 167,1) solid;}
    /deep/ .el-pagination.is-background .btn-prev{ background: rgba(246, 246, 246,1); border: 1px rgba(167, 167, 167,1) solid;}
    /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active{ background-color: #2974FF;}
    /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active:hover {
        color: #fff;
    }
    /deep/ .el-pagination.is-background .el-pager li:not(.disabled):hover {
        color: #2974FF;
    }
    /deep/ .el-pager li{ border-radius: 14px; background: rgba(255, 255, 255, 1); border: 1px rgba(167, 167, 167, 0.3) solid;}
    /deep/ .btn-prev{ border-radius: 14px; padding: 0 10px;}
    /deep/ .btn-next{ border-radius: 14px; padding: 0 10px;}

    /deep/ .el-table th{ background: rgb(246, 246, 246);}
    /deep/ .el-input__inner{ line-height: 36px; height: 36px; font-size: 12px; background: rgb(247, 248, 250);  border: 0;}
    /deep/ .el-date-editor .el-range-input{ background: rgb(247, 248, 250); }
    /deep/ .el-button{ padding: 11px 23px !important;}
    /deep/ .el-button--mini{ padding: 6px 15px !important;}
    /deep/ .el-button--danger {
        color: #FFF;
        background-color: #2974FF;
        border-color: #2974FF;
    }
    .team {
    	background: #F9F9F9;
    }
    /deep/ .baise .el-input__inner{ line-height: 36px; height: 36px; font-size: 12px; background: rgb(255,255,255);  border: 0;}
  }
</style>
